import React from 'react'
import { actions } from 'mirrorx'

class CarInsurance extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      info: {}
    }
    this.skipToDetail = this.skipToDetail.bind(this)
  }

  componentDidMount () {
    // document.title = 'Homepage'
  }

  skipToDetail () {
    const iTemp = (~~(Math.random() * 100000)).toString()
    actions.routing.push({
      pathname: '/car-insurance-detail',
      search: '?userId=' + iTemp
    })
  }

  render () {
    return (
      <div className='car-insurace-box'>
        <div className='car-insurace-title'>Homepage</div>
        <div className='info-bg' />
        <div className='info-content'>
          <div className='info-text'>
            <p className='info-name'>Stella Morgamanjimy</p>
            <p className='info-license'>license: Sha 2777D</p>
          </div>
          <div className='info-img'>
            <img src='/assets/images/car-insurance/avar.png' alt='img' />
          </div>
        </div>
        <div className='project-box'>
          <div className='project-item' onClick={this.skipToDetail}>
            <div className='project-img'>
              <img src='/assets/images/car-insurance/icon_plan.png' alt='plans' />
            </div>
            <p className='project-text'>Plans</p>
          </div>
          <div className='project-item'>
            <div className='project-img'>
              <img src='/assets/images/car-insurance/icon_coupons.png' alt='coupons' />
            </div>
            <p className='project-text'>Coupons</p>
          </div>
          <div className='project-item'>
            <div className='project-img'>
              <img src='/assets/images/car-insurance/icon_claims.png' alt='Claims' />
            </div>
            <p className='project-text'>Claims</p>
          </div>
        </div>
      </div>
    )
  }
}

export default CarInsurance
